<!--
 * @Author: xfworld
 * @Date: 2020-06-10 16:12:56
 * @LastEditors: xfworld
 * @LastEditTime: 2020-07-13 16:36:45
 * @Description: 
 传递值的要求： footerItem
 {
     active: 默认路径,
     tabList: 导航信息
     tabList:[
         {
             icon: 图标
             path: 路径
             title: 标题
         }
     ]
 }

-->
<template>
  <div class="footer">
    <van-tabbar fixed placeholder safe-area-inset-bottom v-model="activePath" v-show="footerShow">
      <van-tabbar-item v-for="tabItem in footerTabList" :icon="tabItem.icon" :key="tabItem.path" :to="tabItem.path" :name="tabItem.path">
        {{ tabItem.title }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import mixin from "./mixin";
export default {
  name: "footerBar",
  mixins: [mixin],
  mounted() {
    // 挂载默认路径
    if (this.$route.path !== null && this.$route.path !== undefined) {
      this.editPath(this.$route.path);
    }
  },
  data() {
    return {
      activePath: ""
    };
  },
  watch: {
    // 监控路由属性的变化 '$route' (to, from)
    $route: {
      handler(to) {
        // 处理页面刷新后, 默认选中的图表不再当前路由
        this.editPath(to.path);
      },
      //   -初始化,就先执行一次
      immediate: true
    }
  },
  methods: {
    editPath(urlPath) {
      this.activePath = urlPath;
    }
  }
};
</script>

<style lang="less">
.footer {
  height: 2rem;
  //background: #f2f2f2;
}
// 路由切换动画
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.4s linear;
}
.slide-left-enter-active,
.slide-right-enter-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.slide-right-enter {
  transform: translate(-100%);
}
.slide-right-leave-to {
  transform: translate(100%);
}
.slide-left-enter {
  transform: translate(100%);
}
.slide-left-leave-to {
  transform: translate(-100%);
}
</style>
